<template>
  <transition name="fade">
     <div class="class_wrap">
    <back title='购物车'></back>
    <div class="edit" v-show="data.length">
      <b v-show="!is_edit" @click="is_edit=!is_edit">编辑</b>
      <b v-show="is_edit" @click="is_edit=!is_edit">完成</b>
    </div>
    <div class="empty_hint_wrap" v-show="!data.length&&shop_car_hint">空空的，去买点 ...</div>
    <div class="item_wrap" :class="is_edit?'idet':''">
      <ul>
        <itemList @set_all_check="set_all_check"
                  @get_shop_car="get_shop_car"
                  @selectItem="selectItem"
                  v-for="(item ,index ) in data"
                  :data_list="data_list"
                  :data="item"
                  :isReload="isReload"
                  :key="index">
        </itemList>
      </ul>
    </div>
    <div class="remove_wrap" v-show="is_edit&&data.length">
        <div  @click="set_all_check">
          <i :class="allchecke===true?'active':''"></i><span>全选</span>
        </div>
      <p @click="remove_hint">删除</p>
    </div>
    <div class="pay_btn_wrap" v-show="!is_edit&&data.length">
        <div @click="set_all_check">
          <i :class="allchecke===true?'active':''"></i><span>全选</span>
        </div>
        <b>总计: ¥{{tatle}}</b>
      <p @click="toPayment">去支付({{payment_number}})</p>
    </div>
       <router-view @get_shop_car="get_shop_car"></router-view>
  </div>
  </transition>
</template>

<script type="text/ecmascript-6">
  import itemList from 'components/car_item_list'
  import back from 'components/back'
  import {get_shop_car, set_shop_check,remove_shop_car,get_car_number} from 'api/shop_car'
  import {price_format} from 'assets/base/base'
  import {mapMutations} from 'vuex'
  import {get_cookie} from 'assets/cookie/cookie'


  export default {
    data() {
      return {
        is_edit:false,
        data:[],
        data_list:null,
        tatle:0,
        allchecke:true,
        payment_number:0,
        isAjax:false,
        shop_car_hint:false,
        isReload:false,   //让item组件中的number刷新用的损招
      }
    },
    created() {
      this.get_last_ajax=(()=>{
        let i=0
        let arr=[]
        return ()=>{
          i++
          ((i)=>{
            arr.push(1)
            get_shop_car({
              token:get_cookie('key'),
            }).then((res)=>{
              if(res.status===200&&res.data.resStatus===0){
                if(i===arr.length){
                  this.data=res.data.data
                  console.log(this.data)
                  this.data_list=res.data
                  this.isAjax=false
                  this.get_car_number()
                }
              }else if(res.data.resStatus===-1){
                this.isAjax=false
                this.setIsLogin(false)
              }else{
                this.data=[]
                this.isAjax=false
                this.data_list=res.data
                this.get_car_number()
              }
            })
          })(i)
        }
      })()

      this.$watch('data_list',function (newVal) {
        this.payment_number=0  //支付按钮上的数字初始为0
        this.shop_car_hint=true //变化的时机是在有了数据(不管是不是正确的)以后就一直是true
        this.tatle=0           //总价格 初始为0
        this.allchecke=true   //初始全选中为true
        this.arrId=[];
        for(let i=0;i<this.data.length;i++){
          this.tatle+=Number(this.data[i].totalPrice)
          for(let a=0;a<this.data[i].package_list.length;a++){
            this.data[i].package_list[a].sign===0&&(this.allchecke=false);
            if(this.data[i].package_list[a].sign===1){
              this.payment_number++
              this.arrId.push(this.data[i].package_list[a].cartid)
            }
          }
        }
        if(!this.data.length){  //如果没有数据了取消编辑状态
          this.is_edit=false
        }
        this.tatle=price_format(this.tatle,2)
      })
    },
    activated(){
        this.is_edit=false
        this.get_shop_car()
        this.shop_car_hint=false  //防止一进来时候就提示（购物车是空的）因为还没请求到数据，不知道是不是为空
    },
    methods: {
      get_shop_car(is_reload){
        if(is_reload){
          this.isReload=true
        }else{
          this.isReload=false
        }
        this.isAjax=true
        this.get_last_ajax()
      },
      get_car_number(){
        get_car_number({
          token:get_cookie('key')
        }).then((res)=>{
          console.log(res)
          if(res.status===200&&res.data.resStatus===0){
            this.setCarNumber(res.data.data[0]['no-cart'])
          }
        })
      },
      selectItem(id){
        this.$router.push({
          path: '/shop_car/detial',
          query: {
            itemId: id
          }
        })
      },
      set_all_check(checks,sig){
        let sign=0
        let arr=[]
        this.isAjax=true
        if(typeof sig==='number'){
           sign=sig
          arr=checks
        }else{
          if(this.allchecke===true){
            sign=0
            this.allchecke=false
          }else{
            sign=1
            this.allchecke=true
          }
          for(let a=0;a<this.data.length;a++){
            for(let i=0;i<this.data[a].package_list.length;i++){
              arr.push(this.data[a].package_list[i].cartid)
            }
          }
        }

        set_shop_check({
          token:get_cookie('key'),
          cartId:arr,
          sign:sign}).then((res)=>{
          if(res.status===200&&res.data.resStatus===0){
            this.isAjax=false
            this.get_shop_car()
          }else{
            this.get_shop_car()
            this.isAjax=false
          }
        })
      },
      remove_hint(){
        if(this.isAjax===false) {
          if (this.arrId.length) {
            this.setHint({
              isHint:false,
              text:'您确定要删除' + this.arrId.length + '件商品吗？',
              ok:true
            })
            this.setIsModal(true)
          }
        }
      },
      toPayment(){
        if(this.isAjax===false) {
          if (this.arrId.length) {
             this.$router.push({
               path:'/orderConfirm'
             })
          }
        }
      },
      confirm(){
          remove_shop_car({
            token:get_cookie('key'),
            cartid:this.arrId
          }).then((res)=>{
            if(res.status===200&&res.data.resStatus===0){
              this.is_edit=false  //删除成功时把编辑状态改变
              this.get_shop_car() //请求购物车
            }else{
              this.get_shop_car() //请求购物车
            }
          })
      },
      ...mapMutations({
        setIsLogin: 'SET_IS_LOGIN',
        setIsModal: 'SET_IS_MODAL',
        setHint: 'SET_HINT',
        setCarNumber: 'SET_CAR_NUMBER'
      })
    },
    components: {
      itemList,
      back
    }
  }
</script>

<style scoped lang="scss">
  @import "../assets/sass/mixin";
  .edit{
    position: fixed;
    width: 55px;
    top: 5px;
    z-index: 10;
    right: 0;
    >b{
      margin-top: 9px;
      color: #999;
      font-size: 14px;
      float: right;
      display: inline-block;
      width: 30px;
      height: 27px;
      margin-right: 15px;
      line-height: 20px;
      text-align: center;
    }
    }
  .remove_wrap{
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 56px;
    background: rgba(248,248,248,1);
    z-index: 5;
    >div{
      float: left;
      width: 100px;
      height: 100%;
      font-size: 14px;
      >i{
        float: left;
        width: 20px;
        height: 20px;
        border: 1px solid #aaa;
        border-radius: 50%;
        margin-top: 17px;
        margin-left: 23px;
        background-size: 100% 100%;
      }
      >.active{
        background-image: url('../assets/img/active.png');
        border: none;
      }
      >span{
        float: left;
        margin-left: 10px;
        margin-top: 20px;
        color: #888;
      }
    }
    >p{
      float: right;
      width: 116px;
      height: 100%;
      text-align: center;
      color: #fff;
      background-color:#019fe8;
      font-size: 15px;
      line-height: 56px;
      letter-spacing: 2px;
    }
  }
  .pay_btn_wrap{
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 56px;
    background: rgba(248,248,248,1);
    z-index: 9;
    >div{
      float: left;
      width: 100px;
      height: 100%;
      font-size: 14px;
      >i{
        float: left;
        width: 20px;
        height: 20px;
        border: 1px solid #aaa;
        border-radius: 50%;
        margin-top: 17px;
        margin-left: 23px;
        background-size: 100% 100%;
      }
      >.active{
        background-image: url('../assets/img/active.png');
        border: none;
      }
      >span{
        float: left;
        margin-left: 10px;
        margin-top: 20px;
        color: #888;
      }
    }
    >p{
      float: right;
      width: 100px;
      height: 100%;
      text-align: center;
      color: #fff;
      background-color:#019fe8;
      font-size: 15px;
      line-height: 56px;
      letter-spacing: 2px;
      &:active{
        background-color: #008ed7;
      }
    }
    >b{
      float: left;
      font-size: 14px;
      line-height: 54px;
      font-weight: 500;
    }
  }
  .class_wrap {
    overflow: hidden;
    padding-top: 45px;
    padding-bottom: 63px;
    .item_wrap {
      margin: 0 auto;
      width: 100%;
      transition:width 180ms;
      > ul {
        width: 100%;
        overflow: hidden;
      }
    }
    .idet{
      width: 90%;
      border: 1px solid #eee;
    }
  }
  .empty_hint_wrap{
    margin-top: 30px;
   color: #aaa;
  }
  .fade-enter-active /* .fade-leave-active below version 2.1.8 */
  {
    opacity: 0;
  }

  .fade-enter-to /* .fade-leave-active below version 2.1.8 */
  {
    opacity: 1;
    transition: all .5s;
  }
</style>
